<template>
  <div>
    <el-dialog
        title="重新绑定设备"
        :visible="rebindFlag"
        :close-on-click-modal="false"
        width="300px"
        :before-close="handleClose">
      <el-form
          ref="form"
          :model="form"
          class="form-container"
          :rules="rules"
      >
        <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入" clearable type="password" show-password autocomplete="new-password"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      <section style="text-align: center;">
        <el-button size="small" @click="handleClose">取消</el-button>
        <el-button size="small" type="primary" :loading="saveLoading" @click="hanldeConfirm">确定</el-button>
      </section>
    </el-dialog>
  </div>
</template>

<script>
import {rebindDev} from '@/api/sbgl'//引入接口
export default {
  name: "cz",
  data() {
    return {
      rules: {
        username: [
          {required: true, message: '不能为空', trigger: 'blur'},
          {max: 24, message: '长度最大 24 个字符', trigger: 'blur' }
        ],
        password: [
          {required: true, message: '不能为空', trigger: 'blur'},
          {max: 24, message: '长度最大 24 个字符', trigger: 'blur' }
        ],
      },
      saveLoading:false,
      form: {
        username: "",
        password:"",
      },
    }
  },
  props: {
    rebindFlag: {
      type: Boolean,
      default: false
    },
    rebindRow: {
      type: Object,
      default: () => {
        return {}
      },
    }
  },
  methods: {
    handleClose(){
      this.$emit('update:rebindFlag', false);
    },
    rebindDev(params) {
      rebindDev(params).then((res) => {
        if (res.code === 200) {
          // 重新绑定成功
          this.W.$tips("success", this.i18n.t('Successfully saved'));
          // 更新父页面表格
          this.handleClose()
        }
      }).catch(err => {
        this.W.$tips('warning', this.i18n.t('Failed saved'));
      }).finally(() => {

      })
    },
    hanldeConfirm(){
      // console.log(123, this.form);
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('下一步',this.form);
          var params=JSON.parse(JSON.stringify(this.form))
          console.log(135, params);
          this.rebindDev(params);
        } else {
          return false;
        }
      })
    },
  },
  mounted() {

  }
}
</script>

<style scoped>
  /deep/ .el-dialog__header {
    background: #F5F7FC;
  }
  .el-button {
    padding: 8px 30px;
  }
</style>